<template>
	<view>
		<template v-if="listConversationState == 'success'">
			<view class="list-conversation">
				<view
					@click="getConversationDetail('more')"
					class="more">点击加载更多</view>
				<template v-for="item in listConversation">
					<view class="for-left" v-if="item.user.uid != myUid">
						<view class="avatar" @click="$_To('user/user?uid='+item.user.uid)">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<view class="_right">
							<view class="_top">
								<text class="nickname">{{item.user.interaction.followNote?item.user.interaction.followNote:item.user.nickname}}</text>
								<text class="roleName">{{item.user.roleName}}</text>
								<text class="time">{{item.timeAgo}}</text>
							</view>
							<view class="_bottom">
								<view class="content" v-if="item.content">
									{{$_filterHtml(item.content)}}
								</view>
								<view
									@click="$_To('public/image?url=' + item.file.imageBigUrl)"
									class="file-image"
									v-if="item.file && item.file.type == 1">
									<image :src="item.file.imageBigUrl" mode="widthFix"></image>
								</view>
								<view
									class="file-audio"
									v-if="item.file && item.file.type == 3">
									<public-audio
										Css="width:350rpx;"
										:Url="item.file.audioUrl"></public-audio>
								</view>
							</view>
						</view>
					</view>
					
					<view class="for-right" v-if="item.user.uid == myUid">
						<view class="_left">
							<view class="_top">
								<text class="time">{{item.timeAgo}}</text>
								<text class="roleName">{{item.user.roleName}}</text>
								<text class="nickname">{{item.user.nickname}}</text>
							</view>
							<view class="_bottom">
								<view class="content" v-if="item.content">
									{{$_filterHtml(item.content)}}
								</view>
								<view
									@click="$_To('public/image?url=' + item.file.imageBigUrl)"
									class="file-image"
									v-if="item.file && item.file.type == 1">
									<image :src="item.file.imageBigUrl" mode="widthFix"></image>
								</view>
								<view
									class="file-audio"
									v-if="item.file && item.file.type == 3">
									<public-audio
										Css="width:350rpx;"
										:Url="item.file.audioUrl"></public-audio>
								</view>
							</view>
						</view>
						<view class="avatar" @click="$_To('user/user?uid='+item.user.uid)">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
					</view>
				</template>
			</view>
			<view style="width: 100%;height: 25rpx;"></view>
			<view class="public-comment-box">
				<view class="seize-a-seat"></view>
				<view class="fixed">
					<!-- #ifndef H5 -->
					<view
						class="button-audio"
						@click="audioButtonState = !audioButtonState">
						<text
							:class="audioButtonState?'iconfont icon-text':'iconfont icon-yuyin'"></text>
					</view>
					<!-- #endif -->
					<textarea
						v-if="!audioButtonState"
						placeholder="说点什么吧..."
						placeholder-style="font-size: 28rpx;color:#C0C4CC;"
						v-model="content"
						cursor-spacing="300"
						maxlength="-1"
						:focus="focus"
						:show-confirm-bar="false"></textarea>
					<view
						@click="clickAudioButton"
						class="voiceButton"
						v-if="audioButtonState">
						{{audioButtonText}}
						{{audioButtonTextSecond?audioButtonTextSecond+'秒':''}}
					</view>
					<view
						v-if="!audioButtonState"
						@click="clickEmoji"
						class="button"
						style="padding-right: 15rpx;">
						<text class="iconfont icon-smile"></text>
					</view>
					<view
						@click="clickMore"
						class="button"
						style="padding-right:22rpx;"
						v-if="!content && !audioButtonState">
						<text class="iconfont icon-add-circle"></text>
					</view>
					<view
						@click="clickPost"
						class="sending-button"
						v-if="content">发送</view>
				</view>
				<view class="fixed-emoji" v-if="listEmoji_state">
					<scroll-view scroll-y>
						<template v-if="listEmoji.length">
							<text
								@click="clickEmojiSelect(item)"
								v-for="item in listEmoji">{{item}}</text>
						</template>
						<template v-else>
							<public-loading></public-loading>
						</template>
					</scroll-view>
				</view>
			</view>
		</template>
		<public-loading v-if="listConversationState == 'loading'"></public-loading>
		<public-empty v-if="listConversationState == 'empty'"></public-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myUid:"",
				listConversation:[],
				listConversationPage:2,
				listConversationState:"loading",
				focus:false,
				content:"",
				listEmoji:[],
				listEmoji_state:false,
				audioButtonState:false,
				audioButtonTextState:false,
				audioButtonText:"单击 说话",
				audioButtonTextSecond:0
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onLoad(e) {
			setTimeout(()=>{
				uni.pageScrollTo({
					scrollTop: 99999999,
					duration: 100
				});
			},1000);
			if(uni.getStorageSync('user')){
				this.myUid = uni.getStorageSync('user').data.detail.uid;
			}
			this.Id = e.id;
			this.Uid = e.uid;
			this.getConversationDetail();
		},
		methods: {
			// 对话详情
			getConversationDetail(more){
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/conversation/"+this.Id+"/messages",
					{
						"whitelistKeys":"uid,avatar,nickname,roleName,interaction",
						"orderDirection":"desc",
						"pageListDirection":"oldest",
						"pageSize":15,
						"page":more == 'more' ? this.listConversationPage : "",
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.listConversation = res.data.data.list.concat(this.listConversation)
								this.listConversationPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.listConversation = res.data.data.list;
								this.listConversationState = "success"
								uni.hideLoading();
								setTimeout(()=>{
									uni.pageScrollTo({
										scrollTop: 99999999,
										duration: 100
									});
								},1000);
								this.getUpdating();
							}else{
								this.listConversationState = "empty"
							}
						}
					}
				)
			},
			// 更新状态
			getUpdating(){
				this.$_Request(
					"PUT","/api/v2/conversation/mark-as-read",
					{
						"type":"conversation",
						"conversationId":this.Id
					},
					(res) => {}
				)
			},
			// 点击表情按钮
			clickEmoji(){
				this.listEmoji_state = !this.listEmoji_state;
				this.focus = false;
				if(this.listEmoji_state){
					uni.request({
						url:this.$_Config() + "Config.json",
						method:'GET',
						success: (res) => {
							this.listEmoji = res.data.allEmoji;
						}
					})
				}
			},
			// 选中表情
			clickEmojiSelect(e){
				this.listEmoji_state = false;
				this.content += e;
				this.focus = true;
			},
			// 更多
			clickMore(){
				uni.showActionSheet({
					itemList: ['图片'],
					success: (res) => {
						// 图片
						if(res.tapIndex == 0){
							this.methodImage()
						}
					}
				});
			},
			// 发表
			clickPost(){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/conversation/send-message",
					{
						"uidOrUsername":this.Uid,
						"message":this.content
					},
					(res) => {
						if(res.data.code == 0){
							this.getConversationDetail();
							this.focus = false;
							this.content = "";
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 图片操作方法
			methodImage(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.imageUpload(res.tempFiles[0].path);
					}
				})
			},
			// 图片上传方法
			imageUpload(img){
				uni.showLoading({ title: "图片发送中" });
				uni.uploadFile({
					url: this.$_Url() + "/api/v2/common/upload-file",
					filePath: img,
					name: "file",
					header: this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"conversation_messages",
						"tableColumn":"message_file_id",
						"type":"image",
						"uploadMode":"file",
						"tableKey":this.Uid
					},
					success: (res) => {
						if(JSON.parse(res.data).code == 0){
							this.sendingAttachments(JSON.parse(res.data).data.fid);
						}else{
							uni.showToast({
								title:JSON.parse(res.data).message,
								icon:"none",
								duration:1000
							});
						}
						
					}
				})
			},
			// 点击录音按钮
			clickAudioButton(){
				this.audioButtonTextState = !this.audioButtonTextState;
				if(this.audioButtonTextState){
					uni.getRecorderManager().start();
					this.audioButtonText = "录制中";
					this.audioButtonTextSecond = 1;
					this.timer = setInterval(() => {
						this.audioButtonTextSecond += 1;
						if(this.audioButtonTextSecond == 59){
							this.audioButtonText = '单击 说话';
							this.audioButtonTextSecond = 1;
							this.audioButtonTextState = false;
							clearInterval(this.timer)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								this.audioUpload(res.tempFilePath)
							});
						}
					}, 1000);
				}else{
					this.audioButtonText = '单击 说话';
					this.audioButtonTextSecond = 0;
					this.audioButtonTextState = false;
					clearInterval(this.timer)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						this.audioUpload(res.tempFilePath)
					});
				}
			},
			// 音频上传
			audioUpload(audio){
				uni.showLoading({ title: "语音发送中" });
				uni.uploadFile({
					url: this.$_Url() + "/api/v2/common/upload-file",
					filePath: audio,
					name: "file",
					header: this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"conversation_messages",
						"tableColumn":"message_file_id",
						"type":"audio",
						"uploadMode":"file",
						"tableKey":this.Uid
					},
					success: (res) => {
						if(JSON.parse(res.data).code == 0){
							this.sendingAttachments(JSON.parse(res.data).data.fid);
						}else{
							uni.showToast({
								title:JSON.parse(res.data).message,
								icon:"none",
								duration:1000
							});
						}
						
					}
				})
			},
			// 附件发送
			sendingAttachments(e){
				this.$_Request(
					"POST","/api/v2/conversation/send-message",
					{
						"uidOrUsername":this.Uid,
						"fid":e
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							this.getConversationDetail();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss">
page{
	background: $BeiJingSe;
}
.list-conversation{
	.for-left{
		display: flex;
		padding: 25rpx 25rpx 0 25rpx;
		.avatar{
			flex-shrink: 0;
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background: $ZhanWeiSe;
		}
		._right{
			flex: 1;
			margin-left: 25rpx;
			._top{
				font-size: 32rpx;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				.nickname{
					font-size: 22rpx;
					line-height: 22rpx;
				}
				.roleName{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					padding-left: 10rpx;
				}
				.time{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					padding-left: 10rpx;
				}
			}
			._bottom{
				.content{
					background: #FFF;
					padding: 15rpx 20rpx;
					margin-top: 15rpx;
					border-radius: 10rpx;
					display: inline-block;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.file-image{
					background: #FFF;
					padding: 15rpx;
					width: 400rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.file-audio{
					display: inline-block;
					background: #FFF;
					padding: 15rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
			}
		}
	}
	.for-right{
		display: flex;
		padding: 25rpx 25rpx 0 25rpx;
		._left{
			flex: 1;
			margin-right: 25rpx;
			._top{
				font-size: 32rpx;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.nickname{
					font-size: 22rpx;
					line-height: 22rpx;
				}
				.roleName{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					padding-right: 10rpx;
				}
				.time{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
					padding-right: 10rpx;
				}
			}
			._bottom{
				display: flex;
				justify-content: flex-end;
				.content{
					background: #95ec69;
					padding: 15rpx 20rpx;
					margin-top: 15rpx;
					border-radius: 10rpx;
					display: inline-block;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.file-image{
					background: #FFF;
					padding: 15rpx;
					width: 50%;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
				.file-audio{
					display: inline-block;
					background: #FFF;
					padding: 15rpx;
					margin-top: 15rpx;
					box-shadow: 0 0 1rpx $ZhanWeiSe;
				}
			}
		}
		.avatar{
			flex-shrink: 0;
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;
			border-radius: 10rpx;
			background: $ZhanWeiSe;
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		background: #FFF;
		margin: 25rpx 25rpx 0 25rpx;
		padding: 25rpx 0;
		border-radius: 100rpx;
		color: $ZhanWeiSe;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
	}
}
.public-comment-box{
	.seize-a-seat{
		width: 100%;
		height: 101rpx;
	}
	.fixed{
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid $BianKuangSe;
		background: #f7f7f7;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		.button-audio{
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 0 0 22rpx;
			.icon-yuyin,.icon-text{
				font-size: 60rpx;
				line-height: 60rpx;
			}
		}
		textarea{
			margin: 0 15rpx;
			display: block;
			font-size: 28rpx;
			line-height: 35rpx;
			background: #FFF;
			height: 80rpx;
			padding: 0;
		}
		.voiceButton{
			margin: 0 15rpx;
			height: 80rpx;
			flex: 1;
			background: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.button{
			flex-shrink: 0;
			.iconfont{
				font-size: 60rpx;
				line-height: 60rpx;
			}
		}
		.sending-button{
			width: 150rpx;
			height: 60rpx;
			background: #07c160;
			margin-right: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			color: #FFF;
			font-size: 28rpx;
			line-height: 28rpx;
		}
	}
	.fixed-emoji{
		width: 600rpx;
		height: 800rpx;
		position: fixed;
		bottom: 150rpx;
		left: 75rpx;
		z-index: 999;
		background: #FFF;
		box-shadow: 0 0 10rpx #999;
		display: flex;
		align-items: center;
		justify-content: center;
		scroll-view{
			width: 560rpx;
			height: 770rpx;
			padding-bottom: 30rpx;
			text{
				display: inline-block;
				font-size: 50rpx;
				line-height: 50rpx;
				padding: 30rpx 10rpx 0 10rpx;
			}
		}
	}
}
</style>
